<!--领用单出库-->
<template>
  <div>
    <cus-modal ref="modal" title="入库单出库" @onOk="onOk" width="960">
      <cus-search style="margin: -20px 0 20px 0; padding: 20px 0 0 0">
        <cus-search-item>
          <Form class="flex" style="width: 100%;justify-content:space-between; " :model="form" :label-width="100"
            ref="formValidate" @keydown.native.enter.prevent="onInit">
            <FormItem label="单据日期" class="mr_20 mb_20">
              <DatePicker type="daterange" ref="formDate" transfer v-model="dateStr" format="yyyy-MM-dd"
                @on-change="onChange" placeholder="开始日期 - 结束日期" style="width: 200px" />
            </FormItem>
            <FormItem label="入库单号" prop="storageNo" class="mr_20 mb_20">
              <Input placeholder="请输入入库单号" clearable maxlength="20" v-model="form.storageNo" />
            </FormItem>
            <div style="display: flex">
              <cusButton class="mr_20 mb_20" type="primary" @onClick="onSeach()">查询</cusButton>
              <cusButton class="mr_20" type="primary" @onClick="reset()">重置</cusButton>
            </div>
          </Form>
        </cus-search-item>
      </cus-search>
      <Table border :loading="loading" :columns="columns" :data="data" :size="vuex_config.tableSize">
        <template slot-scope="{ row }" slot="billDateOperation">
          {{ new Date(row.billDate).Format("yyyy-MM-dd") }}
        </template>
        <template slot-scope="{ row }" slot="operation">
          <div class="flex">
            <cus-button type="text" size="small" :style="{ color: '#1E6FFF' }" style="padding: 0 5px"
              @onClick="Outbound(row)">

              <span>出库</span>
            </cus-button>
          </div>
        </template>
      </Table>
      <div class="mt_10" v-if="data.length > 0">
        <cus-page :data="pages" class="mt_10 flex_jd" @pageChange="getGoodsStockbilListApi()"></cus-page>
      </div>
      <div slot="footer">
        <slot name="footer">
          <!-- <div class="modal-footer">
            <cus-button size="small" class="mr_2" @onClick="onCancel"
              >取消</cus-button
            >
            <cus-button type="primary" size="small" @onClick="onCancel"
              >确认</cus-button
            >
          </div> -->
        </slot>
      </div>
      <!-- 添加出库量模态框 -->
      <Modal v-model="showModal" width="420" title="确认领用人" >
        <Form :model="showForm" ref="showFormValidate" :rules="showRuleValidate" :label-width="105" @keydown.native.enter.prevent="onInit">
          <FormItem class="mr_10 mb_20" label="领用单位" prop="recipientDepartmentId">
           
            <Select placeholder="全部" clearable v-model="showForm.recipientDepartmentId" style="width: 189px">
              <Option v-for="item in recipientDepartmentTree" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="领用人:" prop="recipientBy"
            class="mr_24 mb_20">
            <Input placeholder="请输入领用人" maxlength="20" v-model="showForm.recipientBy" style="width: 189px" />
          </FormItem>
        </Form>
        <div slot="footer">
          <slot name="footer">
            <div class="modal-footer">
              <cus-button size="small" class="mr_2" @onClick="showModal = false">取消</cus-button>
              <cus-button type="primary" size="small" @onClick="onOk">确认</cus-button>
            </div>
          </slot>
        </div>
      </Modal>
    </cus-modal>
  </div>
</template>

<script>
import {
  getGoodsStockbilList,
  generateOutStockBillByStockBill,
  getDepartmentOfCurrentUnit
} from "@/api/business/manager";
import { number } from "echarts";
import moment, { RFC_2822 } from "moment";
// require 方式
require("moment/locale/zh-cn");
moment.locale("zh-cn", {
  week: {
    dow: 1
  }
});
// import 方式
import "moment/locale/zh-cn";
moment.locale("zh-cn");

const columns = [
  {
    title: "序号",
    type: "index",
    align: "center",
    minWidth: 70
  },
  {
    title: "入库单号",
    key: "storageNo",
    minWidth: 145,
    align: "center"
  },
  {
    title: "单据日期",
    slot: "billDateOperation",
    minWidth: 135,
    align: "center"
  },
  {
    title: "供应商",
    key: "supplierName",
    minWidth: 135,
    align: "center"
  },
  {
    title: "验收员",
    key: "checkName",
    minWidth: 135,
    align: "center"
  },
  {
    title: "入库方式",
    key: "storageWayDesc",
    minWidth: 145,
    align: "center"
  },
  {
    title: "操作",
    slot: "operation",
    minWidth: 95,
    fixed: "right",
    align: "center",
  },
];
export default {
  name: "",
  computed: {},
  data() {
    return {
      // 日期
      dateStr: "",
      // 领用人弹窗
      showModal: false,
      showForm: {
        recipientDepartmentId: '',
        recipientBy: '',
        poStockBillId: '',
      },
      loading: false,
      form:  {
  id: "",
  startDate: "", // 开始日期
  stopDate: "", // 结束日期
  storageNo: "", // 入库单号
      },
      columns: columns,
      data: [],
      recipientDepartmentTree: [], // 领用单位Tree数据
      pages: {
        //分页
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      showRuleValidate: {
        recipientDepartmentId: [{type: 'number', required: true, message: '请选择领用单位', trigger: 'change' }],
        recipientBy: [{ required: true, message: '请输入领用人', trigger: 'change' }],
     }
    };
  },
  mounted() { },
  methods: {
    show() {
      console.log(123);
    // console.log(this.$data);
      this.form.storageNo = ''
      this.loading = false;
      this.$refs["modal"].show = true;
      this.getGoodsStockbilListApi();
      this.getCurrentWeek()
    },
    reset() {
      this.pages.page = 1
      this.pages.pageSize = 10
      this.$refs["formValidate"].resetFields();
      this.getGoodsStockbilListApi();
       this.getCurrentWeek()
    },
    onSeach() {
     this.pages.page = 1
     this.getGoodsStockbilListApi();
    },
    onChange(e) {
      this.dateStr = e;
      (this.form.startDate = e[0]), // 开始日期
        (this.form.stopDate = e[1]); // 结束日期
    },
    // 获取本周日期组件处理
    getCurrentWeek() {
      let start = moment()
        .weekday(0)
        .format("YYYY-MM-DD"); //本周一
      let end = moment()
        .weekday(6)
        .format("YYYY-MM-DD"); //本周日、
      this.dateStr = [start, end];
      // this.dateStr[0] = start; //默认一周开始时间
      // this.dateStr[1] = end; //默认一周结束时间
      this.form.startDate = start;
      this.form.stopDate = end;
      console.log(start, end);
      // 数组更新需要使用$set手动更新
      //       this.$set(this.dateStr,0,start)
      // this.$set(this.dateStr,1,end)
    },
    onOk() {
      this.$refs['showFormValidate'].validate((valid) => {
                    if (valid) {
                       this.getGenerateOutStockBillByStockBillApi()
                    } else {
                        return
                    }
                })
    },
    // 出库
    Outbound(row) {

      console.log(row);
      this.$refs["showFormValidate"].resetFields();
      this.showModal = true
      this.showForm.poStockBillId = row.id
      this.getDepartmentOfCurrentUnitApi()
    },
    // 取消
    onCancel() {
      this.$refs["modal"].show = false;
    },
    // 获取入库单数据-----------------------------------------接口
    getGoodsStockbilListApi() {
      this.loading = true;
      return new Promise((resolve) => {
        let params = {
          checkStatus: 0,
          outStockStatus: 0,
          startDate: this.form.startDate,
          stopDate: this.form.stopDate,
          storageNo: this.form.storageNo,
          current: this.pages.page,
          size: this.pages.pageSize,
        };
        getGoodsStockbilList(params).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
          }
          resolve();
        });
      });
    },
    // 查询下级单位-------------------------接口
    getDepartmentOfCurrentUnitApi() {
      return new Promise(resolve => {
        getDepartmentOfCurrentUnit().then(res => {
          if (res.retCode == 2000) {
            this.recipientDepartmentTree = res.data;
          }
          resolve();
        });
      });
    },

    // 入库单出库接口
    getGenerateOutStockBillByStockBillApi() {
      return new Promise(resolve => {
        generateOutStockBillByStockBill(this.showForm).then((res) => {
          this.showModal = false
          if(res.retCode == 2000) {
            this.$Message.success('出库成功')
            this.$emit('update')
            this.getGoodsStockbilListApi();
          }
       else if (res.retCode == 2888) {
        let content = "";
        res.data.map(it => {
          content += `<p style="margin-top:5px">${it}</p>`;
        });
        this.$Modal.warning({
          title: res.retMsg,
          content: content,
          width: "640",
          okText: "确认"
        });
      }else {
        this.$Message.error(res.retMsg)
      }
        })
      })
    }
  }
};
</script>

<style scoped></style>
